<script>
    let materialComponent =  {
        template: `
<div id="tallyRecordBox">
<div style="width: 100%">
        <el-row>
            <span class="contentH3"> 材料列表</span>
            <el-form :inline="true" class="form-inline recordSearchForm" style="margin-top: 10px">
                <el-form-item size="mini">
                <el-input placeholder="材料名称" v-model="titleLike"></el-input>
            </el-form-item>
             <el-button  type="primary" size="mini" @click="handleRecordPageChange(1)" > 搜索</el-button>

            <span class="frBtn" style="">
                <img src="/static/images/daochu.png" style="margin-right: 10px;width:20px;height: 20px" @click="exportData()" alt="导入"/>

                <el-button v-if="currentTally.role!='viewer'" @click="addMaterial" type="primary" size="mini"  class="frBtn"><i class="el-icon-plus" /> 新增材料</el-button>

            </span>

           </span>
        </el-row>
        <div class="clearfix" style="margin-top: 10px;"></div>
        <div>
    <div class="tallyRecordForm">
        <div class="recordListBox">
            <el-card class="box-card" style="cursor: initial;">
        <div class="recordTable">
        <template>
        <el-table :data="recordList" border stripe  style="cursor: initial;">
        <el-table-column fixed type="index">
        </el-table-column>
        <el-table-column prop="title"  label="材料名称"></el-table-column>
        <el-table-column prop="spec" label="材料单位"></el-table-column>
<!--        <el-table-column prop="price" label="材料价格"></el-table-column>-->
        <el-table-column prop="memo" label="备注"></el-table-column>
        <el-table-column fixed="right" width="150" label="操作" v-if="currentTally.role!='viewer' ">
        <template slot-scope="scope">
        <span class="recordOptBtn primary" @click="editRecord(scope.row)" style="cursor: pointer;">
        <i class="el-icon-edit"></i>&nbsp;
        </span>
        <span class="recordOptBtn danger" v-if="!(currentTally.role=='accountant')" @click="delRecord(scope.$index,scope.row)" style="cursor: pointer;">
        <i class="el-icon-delete-solid"></i>&nbsp;
        </span>
        </template>
        </el-table-column>
    </el-table>

        <p style="margin-top: 10px;text-align: center">
        <el-pagination
        background
        layout="prev, pager, next, total"
        :page-size="recordListPage.pageSize"
        :total="recordListPage.totalCount"
        @current-change="handleRecordPageChange"
        >
        </el-pagination>
        </p>
        </template>
        </div>
        </el-card>
        </div>
    </div>
    <!--   -->

    <material-form :dialogShow="materialDialog" :formRow="materialForm" @modalClose="modalClose" ></material-form'>

    <!-- 材料管理   -->
    <export-dialog :dialogShow="exportDialog" @modalCloseq="modalExportDialogClose" :downloadUrl="'https://static.gongsizhang.com/muban/material_export.xlsx'" :uploadUrl="'/api/material/import-data'"></export-dialog>
</div>
    `,
        computed: {
            currentTallyId() {
                return this.$store.state.currentTallyId
            },
            currentTally () {
                return this.$store.state.currentTally
            }
        },
        data:function(){
            return {
                // 区间内的应收付统计
                recordList:[],
                currentPage:1,
                exportDialog:false,
                materialDialog:false,
                materialForm:{},
                titleLike:'',
                recordListPage:{
                    pageSize:10,
                    totalCount:0,
                },
            }
        },
        mounted () {
            this.getList()
        },
        methods:{
            exportData(){
                this.exportDialog = true;
            },
            modalExportDialogClose(){
                this.handleRecordPageChange(1)
                this.exportDialog = false
            },
            handleRecordPageChange(currentPage){
                this.currentPage = currentPage
                this.getList()
            },
            addMaterial(){
                this.materialForm = {};
                this.materialDialog = true
            },
            modalClose(){
                this.materialDialog = false
                this.handleRecordPageChange(1)
            },
            editRecord(row){
                this.materialForm = row
                this.materialDialog = true;
            },
            getList(){
                let that = this
                let page = this.currentPage
                that.$store.dispatch('getMaterialList',that.currentTallyId);


                let params = {
                    page:page,
                    tally_id:that.currentTallyId
                };

                if(that.titleLike !== ''){
                    params['titleLike'] = that.titleLike;
                }

                axios.get('/api/material/lists',{
                    method: 'get',
                    headers: {'token': loginToken},
                    params:params
                }).then(function(res) {
                    if(res.data.status === 'success'){
                        that.recordList = res.data.data.data
                        that.recordListPage = res.data.data.pageInfo
                    }else{
                        that.$message({
                            type: 'error',
                            message: '解析数据失败:'+res.data.error_message
                        })
                    }
                })
            },
            delRecord(index,row){
                let that = this
                this.$confirm('确定要删除该行记录', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        if(action === 'confirm') {
                            let postUrl = '/api/material/del'
                            axios.post(postUrl,{id:row['id'],tally_id:that.currentTallyId},{
                                headers: {'token': loginToken},
                            }).then(function(res) {
                                if(res.data.status === 'success'){
                                    that.$message({
                                        type: 'success',
                                        message: '操作成功~'
                                    })
                                    that.recordList.splice(index, 1)
                                }else{
                                    that.$message({
                                        type: 'error',
                                        message: '解析数据失败:'+res.data.error_message
                                    })
                                }
                            })
                        }
                    }
                })
            }
        },

    }
</script>
<style>
    .hxa{
        color: #3396fa;
    }
    .recordOptBtn{
        cursor: pointer;
    }
    .recOpt .el-button--medium {
        padding: 6px;
        font-weight: normal;
    }
    #tallyRecordBox{
        width:100%;
    }
</style>
